<template>
  <el-dialog
    :title="$t('add.add132')"
    :visible.sync="dialogShow"
    width="700px"
    height="300px"
    @close="cancleHandle"
    :close-on-click-modal="false"
  >
    <div class="uploadDesign_inner">
      <div class="item">
        <div class="name">{{ $t('add.add126') }}</div>
        <div class="count">{{ form.workNo || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add127') }}</div>
        <div class="count">{{ form.content || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add117') }}</div>
        <div class="count">{{ form.workOrderType || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add133') }}</div>
        <div class="count">{{ form.creatorName || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add134') }}</div>
        <div class="count">{{ form.createDate || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add135') }}</div>
        <div class="count">{{ form.updaterName || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add129') }}</div>
        <div class="count">{{ form.updateDate || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add130') }}</div>
        <div class="count">{{ form.statusName || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add136') }}</div>
        <div class="count">{{ form.feedback || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add137') }}</div>
        <div class="count">{{ form.engineer || '-' }}</div>
      </div>
      <div class="item">
        <div class="name">{{ $t('add.add138') }}</div>
        <div class="fujian">
          <div v-for="(item, index) in form.fileList" :key="index" class="item">
            <div class="file-name">{{ item.fileName }}</div>
            <div class="text" @click="download(item.url, item.fileName)">
              <span v-if="isAssetTypeAnImage(item.url)">{{ $t('add.add045') }}</span>
              <img v-else src="@/assets/img/file_download.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button :size="optionButtonSize" @click="cancleHandle">{{ $t('add.add139') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  // 上传设计
  name: 'BLZMasterUploadDesign',

  data() {
    return {
      form: {},
      dialogShow: false,
    };
  },

  mounted() {},

  methods: {
    isAssetTypeAnImage(url) {
      const ext = url.substr(url.lastIndexOf('.') + 1);
      return (
        ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(
          ext.toLowerCase(),
        ) !== -1
      );
    },
    download(url, name) {
      window.open(url);
      // window.location.href = url
    },
    cancleHandle() {
      this.dialogShow = false;
      // 取消
      this.form = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.uploadDesign_inner {
  margin-left: 30px;

  .item {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;

    .name {
      width: 200px;
    }

    .fujian {
      // width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 30px;

      .item {
        width: 400px;
        height: 26px;
        display: flex;
        justify-content: space-between;

        .text {
          color: #1a73e9;
          cursor: pointer;

          img {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}
</style>
